<template>
  <div class="app-container">
    <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
      <el-col :span="6">
        <el-form-item label="订单编号:" prop="orderCode">
          <el-input v-model="queryParams.orderCode" clearable placeholder="请输入订单编号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="额度申请编号:" prop="calcSchemeCode">
          <el-input v-model="queryParams.calcSchemeCode" clearable placeholder="请输入额度申请编号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="采购编号:" prop="purchaseNo">
          <el-input v-model="queryParams.purchaseNo" clearable placeholder="请输入采购编号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="订单状态:" prop="orderStatus">
          <el-select v-model="queryParams.orderStatus" clearable>
            <template v-for="dict in dict.type.order_status">
              <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="出租方:" prop="lessorId">
          <el-select v-model="queryParams.lessorId" clearable>
            <template v-for="dict in rentOutList">
              <el-option :label="dict.deptName" :value="dict.deptId" :key="dict.deptId"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="承租方:" prop="leaseeId">
          <el-select v-model="queryParams.leaseeId" clearable filterable>
            <template v-for="dict in CustomerList">
              <el-option :label="dict.customerName" :value="dict.customerId" :key="dict.customerId"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
    </SearchContent>

    <div class="card-wrap card-padding">
      <table-page :loading="loading" :dataList="dataList" border :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @setSizeCurrent="getList">
        <!-- 操作插槽 -->
        <template slot="tableColAc">
          <el-table-column label="操作" width="300" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="text" v-if="
									scope.row.flowStatus !== '3' &&
									scope.row.flowStatus !== '2'
								" @click="edit(scope.row)" v-hasPermi="['orderManagement:orderView:edit']">
                编辑
              </el-button>
              <el-button type="text" @click="orderDetail(scope.row)" v-hasPermi="[
									'orderManagement:orderView:detail',
								]">
                订单详情
              </el-button>
              <el-button type="text" @click="suborder(scope.row)" v-hasPermi="[
									'orderManagement:orderView:suborder',
								]">
                子订单
              </el-button>
              <el-button type="text" @click="generateContract(scope.row)" v-if="scope.row.orderStatus == '10'" v-hasPermi="['orderManagement:orderView:ssHt']">
                生成合同
              </el-button>
              <!-- <el-button -->
              <!-- type="text" -->
              <!-- @click=" -->
              <!-- _toPage({ -->
              <!-- name: 'MainRawSign', -->
              <!-- }) -->
              <!-- " -->
              <!-- v-hasPermi="['orderManagement:orderView:raw']"> -->
              <!-- 原车续签 -->
              <!-- </el-button> -->
              <!-- <el-button -->
              <!-- type="text" -->
              <!-- @click=" -->
              <!-- _toPage({ -->
              <!-- name: 'MainChangeSign', -->
              <!-- }) -->
              <!-- " -->
              <!-- v-hasPermi="[ -->
              <!-- 'orderManagement:orderView:change', -->
              <!-- ]"> -->
              <!-- 换车续签 -->
              <!-- </el-button> -->
              <!-- #### -->

              <!-- <el-button -->
              <!-- type="text" -->
              <!-- @click=" -->
              <!-- _toPage({ -->
              <!-- path: '/vehicleOrder/orderManagement/contractChange', -->
              <!-- name: 'ContractChange', -->
              <!-- query: { -->
              <!-- orderId: scope.row.orderId, -->
              <!-- }, -->
              <!-- }) -->
              <!-- " -->
              <!-- v-hasPermi="[ -->
              <!-- 'orderManagement:orderView:contract', -->
              <!-- ]"> -->
              <!-- 合同变更 -->
              <!-- </el-button> -->
            </template>
          </el-table-column>
        </template>
        <!-- 普通列插槽 -->
        <template slot="tableCol">
          <el-table-column label="订单状态" align="center" prop="orderStatusStr" min-width="100px" show-overflow-tooltip />
          <el-table-column label="订单审批状态" align="center" prop="flowStatusStr" min-width="160px" show-overflow-tooltip />
          <el-table-column label="额度申请编号" align="center" min-width="160px" show-overflow-tooltip prop="calcSchemeCode">
            <template slot-scope="scope">
              <span @click="
									goToDetail(
										scope.row.calcSchemeId,
										scope.row.processId,
									)
								" style="color: #1890ff; cursor: pointer">
                {{ scope.row.calcSchemeCode }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="订单编号" align="center" min-width="160px" show-overflow-tooltip prop="orderCode" />
          <el-table-column label="采购编号" align="center" min-width="200px" show-overflow-tooltip prop="purchaseNo">
            <template slot-scope="scope">
              <span @click="goToDetailCg(scope.row.purchaseOrderId)" style="color: #1890ff; cursor: pointer">
                {{ scope.row.purchaseNo }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="出租方" align="center" prop="lessorName" min-width="160px" show-overflow-tooltip />
          <el-table-column label="承租方" align="center" prop="leaseeName" min-width="160px" show-overflow-tooltip />
          <el-table-column label="交车总数量" align="center" prop="quantityDelivery" min-width="90px" show-overflow-tooltip />
          <el-table-column label="已交车数量" align="center" prop="quantityDelivered" min-width="90px" show-overflow-tooltip />
          <el-table-column label="未交车数量" align="center" prop="quantityUndelivered" min-width="90px" show-overflow-tooltip />
        </template>
      </table-page>
    </div>
  </div>
</template>

<script>
import SearchContent from '@/components/SearchContent/index.vue';
import {
  getOrderListManage,
  getListNoPermission,
  getGenerateContract,
} from '@/api/vehicleOrder';
import { getCustomerList } from '@/api/memberManage/memberList';
export default {
  name: 'OrderView',
  components: {
    SearchContent,
  },
  dicts: ['order_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      dataList: [],
      // 表单参数
      form: {},
      rentOutList: [],
      CustomerList: [],
    };
  },
  created() {
    this.getList();
    this.getListNoPermission();
    this.getCustomerList();
  },
  methods: {
    goToDetail(calcSchemeId) {
      this._toPage({
        path: '/quota/ApplyDetails',
        query: {
          calcSchemeId,
        },
      });
    },
    goToDetailCg(purchaseOrderId) {
      this._toPage({
        name: 'PurchaseAdd',
        query: {
          purchaseOrderId: purchaseOrderId,
          type: 'detail',
          pageType: '采购详情',
        },
      });
    },
    generateContract(row) {
      getGenerateContract(row.orderId).then(res => {
        this.$message({
          message: '生成合同',
          type: 'success',
        });
        this.getList();
      });
    },
    async getCustomerList() {
      let params = {
        pageNum: 1,
        pageSize: 10000,
      };
      try {
        let res = await getCustomerList(params);
        this.CustomerList = res.rows;
      } catch (error) { }
    },
    async getListNoPermission() {
      try {
        let res = await getListNoPermission();
        this.rentOutList = res.data;
      } catch (error) { }
    },
    // 编辑
    edit(row) {
      this._toPage({
        path: '/vehicleOrder/placeOrder/placeOrderAdd',
        name: 'PlaceOrderAdd',
        query: {
          immunityAuditType: row.immunityAuditType,
          rentType: row.rentType,
          type: row.carSourceTypeStr == '现有' ? 2 : 1,
          beFrom: 'OrderView',
          orderId: row.orderId,
          preOrderId: row.preOrderId,
          leaseeId: row.leaseeId == -1 ? null : row.leaseeId,
          lessorId: row.lessorId == -1 ? null : row.lessorId,
          sourceBusinessType: row.sourceBusinessType,
          leaseContractTemplateId: row.leaseContractTemplateId,
          isMenu: this.$route.query.isMenu,
          calcSchemeCode: row.calcSchemeCode,
          calcSchemeId: row.calcSchemeId,
          applicationNo: row.applicationNo,
        },
      });
    },
    // 子订单
    suborder(row) {
      this.$router.push({
        name: 'SuborderView',
        query: {
          orderId: row.orderId,
          isMenu: this.$route.query.isMenu,
        },
      });
    },
    // 订单详情
    orderDetail(row) {
      this.$router.push({
        name: 'OrderDetails',
        query: {
          type: row.carType,
          beFrom: 'OrderView',
          orderId: row.orderId,
          preOrderId: row.preOrderId,
          calcSchemeId: row.calcSchemeId,
          isMenu: this.$route.query.isMenu,
        },
      });
    },
    /** 查询测试单表列表 */
    getList() {
      this.loading = true;
      this.queryParams.preOrderId = this.$route.query.preOrderId
        ? this.$route.query.preOrderId
        : '';
      getOrderListManage(this.queryParams).then(res => {
        if (res.code == '200') {
          const { rows, total } = res;
          this.dataList = rows;
          this.total = total;
          this.loading = false;
        }
      });
    },
    reset() {
      this.form = {
        includeStart: 0,
        includeEnd: 1,
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      (this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }),
        this.handleQuery();
    },
  },
};
</script>

<style lang="scss" scoped>
.pagination-container {
  padding: 0 20px 50px !important;
}

.form-dialog {
  ::v-deep .el-dialog__header {
    padding: 10px 20px;
    border-bottom: 1px solid #dcdfe6;

    .el-dialog__headerbtn {
      top: 15px;
    }
  }

  .box-card {
    margin-bottom: 20px;

    .card-title {
      font-size: 16px;
      position: relative;
      margin-left: 8px;
      padding: 0;
    }

    .card-title::after {
      content: "";
      width: 4px;
      height: 18px;
      background-color: aqua;
      display: block;
      position: absolute;
      left: -12px;
      top: 2px;
    }
  }
}
</style>
